import React from "react";
import { Canvas } from "@react-three/fiber";
import { OrbitControls, useGLTF } from "@react-three/drei";

const Model: React.FC = () => {
  const { scene } = useGLTF("/glb/glp3.glb"); // 加载模型

  window.addEventListener("keydown", function (e) {
    if (e.key === "w") {
      scene.position.z += 0.4;
    }
    if (e.key === "s") {
      scene.position.z -= 0.4;
    }
    if (e.key === "a") {
      scene.position.x += 0.4;
    }
    if (e.key === "d") {
      scene.position.x -= 0.4;
    }
  });
  // 相机

  return <primitive object={scene} position={[0, -10, 0]} scale={4} />;
  //
};
// 视角转换跳跃

// w上 s下 a左 d右

const ThreeScene: React.FC = () => {
  return (
    <Canvas style={{ width: "100%", height: "100%" }}>
      {/* 设置场景中的光源 */}
      <ambientLight intensity={0.5} />
      <directionalLight position={[10, 10, 10]} intensity={1} />

      {/* 加载并显示3D模型 */}
      <Model />

      {/* 控制视角 */}
      {/* 自动切换视觉方向 */}
      <OrbitControls />
    </Canvas>
  );
};

export default ThreeScene;
